<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>业务事件数据模型管理-对比</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/AdminLTE-3.0.5/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/dist/admin/css/optimization.css">
    <style>
        .room-cell {
            display: inline-block;
            table-layout: fixed;
            overflow: hidden;
            text-overflow: ellipsis; /* 加省略号 */
            white-space: nowrap; /* 强制不换行 */

            width: 100%;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Home</a>
            </li>
        </ul>

        <!-- SEARCH FORM -->
        <!-- <form class="form-inline ml-3">
          <div class="input-group input-group-sm">
            <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-navbar" type="submit">
                <i class="fas fa-search"></i>
              </button>
            </div>
          </div>
        </form> -->

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->

            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-warning navbar-badge">个人操作</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header">操作面板</span>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-envelope mr-2"></i> 个人资料
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-file mr-2"></i> 3 new reports
                        <span class="float-right text-muted text-sm">2 days</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="/adminRest/v1/token?_ajax_method=DELETE" class="dropdown-item dropdown-footer" onclick="logout(this);"
                       data-rest-type="DELETE">退出登录</a>
                </div>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="/AdminLTE-3.0.5/dist/img/AdminLTELogo.png"
                 alt="AdminLTE Logo"
                 class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">数据模型管理系统</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user (optional) -->

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->

                    <li class="nav-header" id="sidebar-menu"></li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>业务事件数据模型管-对比</h1>
                    </div>

                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="alert alert-info alert-dismissible" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <strong></strong>点击 “columns”， “update_columns”， "update_value" 可展示diff以比详情
                            </div>
                            <!--<h3 class="card-title">Fixed Header Table</h3>-->
                            <!--<a class="btn btn-sm btn-primary" href="#" data-toggle="modal"-->
                               <!--data-target=".bs-example-modal-lg">添加</a>-->
                            <div class="card-tools">
                                <!--<div class="input-group input-group-sm" style="width: 150px;">-->
                                    <!--<input type="text" name="table_search" class="form-control float-right"-->
                                           <!--placeholder="Search">-->

                                    <!--<div class="input-group-append">-->
                                        <!--<button type="submit" class="btn btn-default"><i class="fas fa-search"></i>-->
                                        <!--</button>-->
                                    <!--</div>-->
                                <!--</div>-->
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body table-responsive p-0" id="event-list-view">

                            <!--<div class="row text-left pt-2 pb-2 pl-2 row-box">-->
                                <!--<div class="col-6">-->
                                    <!--<div><span>${a.db_name}</span> - <span>${a.table_name}</span> (<span>${a.ddd_event_stream_id}</span>)</div>-->
                                    <!--<p class="show-diff room-cell" data-a="${a.columns}" data-b="${b.columns}"-->
                                       <!--&gt;columns: ${a.columns}-->
                                    <!--</p>-->
                                    <!--<p class="show-diff room-cell" data-a="${a.update_columns}"-->
                                       <!--data-b="${b.update_columns}"-->
                                       <!--&gt;-->
                                        <!--update_columns: ${a.update_columns}-->
                                    <!--</p>-->
                                    <!--<p class="show-diff room-cell" data-a="${a.update_value}" data-b="${b.update_value}"-->
                                       <!--&gt;update_value:-->
                                        <!--${a.update_value}-->
                                    <!--</p>-->
                                <!--</div>-->
                                <!--<div class="col-6">-->
                                    <!--<div><span>${b.db_name}</span> - <span>${b.table_name}</span> (<span>${b.ddd_event_stream_id}</span>)</div>-->
                                    <!--<p class="show-diff room-cell" data-a="${a.columns}" data-b="${b.columns}"-->
                                       <!--&gt;columns: ${b.columns}-->
                                    <!--</p>-->
                                    <!--<p class="show-diff room-cell" data-a="${a.update_columns}"-->
                                       <!--data-b="${b.update_columns}">-->
                                        <!--update_columns: ${b.update_columns}-->
                                    <!--</p>-->
                                    <!--<p class="show-diff room-cell" data-a="${a.update_value}" data-b="${b.update_value}"-->
                                       <!--&gt;update_value:-->
                                        <!--${b.update_value}-->
                                    <!--</p>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<hr/>-->

                            <div class="diff-container m-auto" style="display: none">
                                <div class="p-1"><span class="btn btn-danger btn-sm diff-container-hide">关闭</span></div>
                                <div class="diffoutput m-auto center-block">

                                </div>
                            </div>
                        </div>

                        <!-- /.card-body -->
                        <div class="card-footer clearfix" id="pagination">

                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </section>

        <section class="content" style="display: none;">
            <textarea class="text-a"></textarea>
            <textarea class="text-b"></textarea>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- 模态框（Modal） -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">创建事件, 数据流ID: <span id="stream_ids"></span></h4>
            </div>
            <div class="modal-body diffoutput-view">

            </div>
        </div>
    </div>
</div>


<!-- jQuery -->
<script src="/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>

<script src="/plugins/jquery-tmpl/jquery.tmpl.js"></script>
<link rel="stylesheet" href="/plugins/pagination/dist/pagination.css">
<script src="/plugins/pagination/dist/pagination.js"></script>

<link rel="stylesheet" href="/plugins/jsdifflib/diffview.css">
<script src="/plugins/jsdifflib/difflib.js"></script>
<script src="/plugins/jsdifflib/diffview.js"></script>

<script id="sidebar-level-1" type="text/x-jquery-tmpl">
  {{if $data._child}}
  <li class="nav-item has-treeview">
    <a href="${pathname}" class="nav-link">
      <i class="nav-icon fas fa-tree"></i>
      <p>
        ${title}
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      {{tmpl($data._child) '#sidebar-level-1'}}
    </ul>
  </li>
  {{else}}
  <li class="nav-item">
    <a href="${pathname}" class="nav-link">
      <i class="nav-icon far fa-circle"></i>
      <p>
        ${title}
      </p>
    </a>
  </li>
  {{/if}}



</script>

<script id="event-list-row" type="text/x-jquery-tmpl">
<div class="row text-left pt-2 pb-2 pl-2 row-box">
                                <div class="col-6">
                                    <h5><span>${a.db_name}</span> - <span>${a.table_name}</span> <span>(${a.ddd_event_stream_id} - ${a.event_name})</span></h5>
                                    <p class="show-diff room-cell" data-a="${a.columns}" data-b="${b.columns}"
                                       >columns: ${a.columns}
                                    </p>
                                    <p class="show-diff room-cell" data-a="${a.update_columns}"
                                       data-b="${b.update_columns}"
                                       >
                                        update_columns: ${a.update_columns}
                                    </p>
                                    <p class="show-diff room-cell" data-a="${a.update_value}" data-b="${b.update_value}"
                                       >update_value:
                                        ${a.update_value}
                                    </p>
                                </div>
                                <div class="col-6">
                                    <h5><span>${b.db_name}</span> - <span>${b.table_name}</span> <span>(${b.ddd_event_stream_id} - ${b.event_name})</span></h5>
                                    <p class="show-diff room-cell" data-a="${a.columns}" data-b="${b.columns}"
                                       >columns: ${b.columns}
                                    </p>
                                    <p class="show-diff room-cell" data-a="${a.update_columns}"
                                       data-b="${b.update_columns}">
                                        update_columns: ${b.update_columns}
                                    </p>
                                    <p class="show-diff room-cell" data-a="${a.update_value}" data-b="${b.update_value}"
                                       >update_value:
                                        ${b.update_value}
                                    </p>
                                </div>
                            </div>
                            <hr/>


</script>
<script>
    window.sideBarPath = '/admin/event/list.html';
</script>
<link rel="stylesheet" href="/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.css">
<script src="/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.js"></script>
<script src="/dist/js/admin.common.js"></script>

<script>
    function diffUsingJS(textA, textB) {
        // get the baseText and newText values from the two textboxes, and split them into lines
        var base = difflib.stringAsLines(textA);
        var newtxt = difflib.stringAsLines(textB);

        // create a SequenceMatcher instance that diffs the two sets of lines
        var sm = new difflib.SequenceMatcher(base, newtxt);

        // get the opcodes from the SequenceMatcher instance
        // opcodes is a list of 3-tuples describing what changes should be made to the base text
        // in order to yield the new text
        var opcodes = sm.get_opcodes();
        var diffoutputdiv = $(".diffoutput");
        while (diffoutputdiv.firstChild) diffoutputdiv.removeChild(diffoutputdiv.firstChild);
        var contextSize = $("contextSize").value;
        contextSize = contextSize ? contextSize : null;

        // build the diff view and add it to the current DOM
        diffoutputdiv.append(diffview.buildView({
            baseTextLines: base,
            newTextLines: newtxt,
            opcodes: opcodes,
            // set the display titles for each resource
            baseTextName: "事件版本-a",
            newTextName: "事件版本-b",
            contextSize: contextSize,
            viewType: $("inline").checked ? 1 : 0
        }));

        // scroll down to the diff view window.
        // location = '' + "#diff";
    }

    let searchParams = new URLSearchParams(window.location.search);
    let event_a = searchParams.get("event_a");
    let event_b = searchParams.get("event_b");
    console.log(event_a);
    console.log(event_b);


    $.ajax({
        url: '/adminRest/v1/event' + window.location.search,
        success: function (res) {
            $('#event-list-row').tmpl(res.data).appendTo('#event-list-view');
        }
    })

    $("#event-list-view").delegate('.show-diff', 'click', function (e) {
        console.log(this);
        $(".diffoutput").html('');

        // $(".diffoutput-view").html('');
        let a = $(this).attr('data-a');
        let b = $(this).attr('data-b');
        diffUsingJS(a, b);
        $(".diff-container").insertAfter($(this).parents(".row-box"));

        $(".diff-container").show();
        // $('.bs-example-modal-lg').modal()
    })

    $(".diff-container-hide").bind('click', function (e) {
        $(".diff-container").hide();
    });

</script>

</body>
</html>
